<template>
  <div class="container learnstyle-page">
    <el-row class="grid-head"></el-row>
    <el-row>
      <div>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="title">试卷资源库</span>
            <el-button style="float: right; padding: 3px 0" type="text">共{{totalCount}}套试卷</el-button>
          </div>
          <div class="text item">

            <div class="top">
              <span>科目:</span>
              <el-button
                class="item"
                v-for="(subject, index) in studentSubjectList"
                :key="index"
                @click="selectTestPaperBySubject(subject)">{{subject.name}}</el-button>
             </div>
           </div>
        </el-card>

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="title">全部试卷</span>
          </div>

          <div v-if="totalCount === 0" class="text item" style="text-align: center">
            <span class="paper">
              <a>暂无试卷</a>
            </span>
          </div>

          <div v-else>
            <template>
              <el-table
                :data="testPaperList"
                style="width: 100%">

                <el-table-column
                  prop="name"
                  align="center"
                  label="试卷名称"
                  width="180">
                </el-table-column>

                <el-table-column
                  align="center"
                  prop="subject_name"
                  label="科目"
                  width="180">
                  <template slot-scope="scope">
                    <el-tag type="success" size="small">{{scope.row.subject_name}}</el-tag>
                  </template>
                </el-table-column>

                <el-table-column
                  align="center"
                  prop="exam_time"
                  label="考试时间(单位：分钟)">
                </el-table-column>

                <el-table-column
                  align="center"
                  prop="mark"
                  label="试卷总分">
                </el-table-column>

                <el-table-column
                  align="center"
                  prop="exam_number"
                  label="参考人数"
                  width="180">
                </el-table-column>

                <el-table-column align="center" label="操作">
                  <template slot-scope="scope">
                    <el-button
                      icon="el-icon-edit"
                      size="small"
                      @click="startExam(scope.row)"
                      type="warning">开始考试</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </div>
        </el-card>
      </div>
    </el-row>

    <div class="block">
      <el-pagination
        background
        v-if="totalCount > 0"
        :current-page="currentPage"
        :page-size="10"
        layout="prev, pager, next, jumper"
        :total="totalCount">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  /*import questionInfoList from '@/components/question-info-list'*/
  export default {
    name: "questionMode",
   // components: {questionInfoList},
    data () {
      return {
        testPaperList: [],
        studentSubjectList: [],
        currentPage: 1,
        pageSize: 10,
        totalCount: 0,
        modeId: '',
        subjectId: '',
        startDate: null,
        studyTime: 0,
      }
    },

    mounted () {
   //   this.modeId = parseInt(this.$route.query.modeId)
    //  this.timeInterval = setInterval(this.countDown, 1000);
      this.startDate = new Date().getTime()
      this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
      this.getStudentSubjectList()
      this.getTestPaperList()
    },

    destroyed () {
      clearInterval(this.timeInterval)
      this.saveStudyHistory()
    },

    methods: {

      countDown () {
        this.studyTime++
      },

      // 保存学习记录
      saveStudyHistory () {

      },

      getTestPaperList () {
        let that = this
        that.axios.get(that.$httpApi.httpUrl('/student/paper/getPaperList'), {
          params: {
            offset: (that.currentPage - 1) * that.pageSize,
            limit: that.pageSize,
            subjectId: that.subjectId
          }
        }).then(function (response) {
          that.testPaperList = response.data.data.dataList
          that.totalCount = response.data.data.total
        })
      },

      // 获取学员学习科目
      getStudentSubjectList () {
        let that = this
        that.axios.get(that.$httpApi.httpUrl('/student/subject/getSubjectByGradeType'), {
          params: {

          }
        }).then(function (response) {
          that.studentSubjectList = response.data.data
        })
      },

      startExam (paper) {
        this.$store.commit('updateTestPaperInfo', paper)
        this.$router.push({
          name: 'exam',
         /* query: {
            testPaperId: this.paper,
          }*/
        })
      },

      selectTestPaperBySubject (subject) {
         this.subjectId = subject.id
         this.getTestPaperList()
      },
    }
  }
</script>

<style scoped>
  .el-pagination {
    margin-top: 25px;
    text-align: center;
  }
  .paper {
    cursor: pointer;
  }
  .el-button {
    font-size: 12px;
  }
  .title {
    font-weight: 700;
    font-size: 16px;
  }
  .paper a:hover {
    color: #11a68d;
  }
  .el-row .box-card {
    width: 100%;
  }

  .top .item {
    margin-left: 20px;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
    border-bottom: 1px solid #EBEEF5;
    padding-bottom: 13px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .grid-head{margin-bottom: 30px;}
  .grid-content-right{text-align: right;color:#24794b;}
  .grid-content-right:hover {
    color: #3a8ee6;
    cursor: pointer;
  }
  .grid-content-left{text-align: left;color:#24794b;}
</style>
